/* pages/vip-buy/vip-buy.wxss */
@import "/assets/common.less";
.archive-page {
  position: relative;
  width: 100%;
  //height: 100%;
  //overflow: hidden;
  background: #fff;

  .navigation-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx;
    box-sizing: border-box;

    .icon-a-huaban1fuben44 {
      font-size: 22px;
    }
  }
  .vip-product-list-wrapper{
    position: relative;
  }
  .title-box{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3060FC;
    image{
      width: 369rpx;
      max-width: 369rpx;
    }
  }
  .main-title{
    position: relative;
    text-align: center;
    font-size: 16px;
    padding: 10rpx 0px 30rpx;
  }
  .group-nav{
    position: relative;
    text-align: center;
  }
  .list-group-nav{
    padding: 30rpx 60rpx 0;
    overflow-x: auto;
    height: calc(100vh - 600rpx);
  }
  .buy-method-list{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10rpx 60rpx 10rpx;
  }
  .def-btn{
    position: relative;
    width: 324rpx;
    height: 68rpx;
    line-height: 68rpx;
    text-align: center;
    border-radius: 20rpx;
    color: #ACACAC;
    background: transparent;
  }
  .discount-btn{
    position: relative;
    height: 48rpx;
  }
  .active-btn{
    background: #F0F9FF;
    color: #0A4CE9;
  }
  .product-list{
    position: relative;
    height: 1000rpx !important;
    //display: inline-flex;
    //align-items: center;
    //width: calc(140vw + 60rpx);
    padding-bottom: 30rpx;
    .product-item{
      position: relative;
      align-items: center;
      border-radius: 8px;
      padding: 30rpx 30rpx;
      border: 1px solid #71CBFF;
      background: #F7FCFF;
      //width: 70vw;
      //min-width: 70vw;
      box-sizing: border-box;
      margin-right: 30rpx;
      &+.product-item{
        //margin-left: 60rpx;
      }
    }
    .swiper-item{
      height: 1000rpx !important;
    }
    .product-title {
      position: relative;
      text-align: left;
      display: flex;
      align-items: center;
      .text{
        font-size: 22px;
        font-weight: bold;
      }
      .discount-box{
        position: relative;
        display: inline-block;
        margin-left: 10px;
        top:0;
        left:0;
        font-size: 14px;
      }
    }
    .product-desc{
      text-align: center;
      font-size: 14px;
      padding: 10rpx 0 0;
    }
    .origin-price{
      text-decoration: line-through;
      text-align: left;
      font-size: 22px;
      padding-top: 10rpx;
      color: #777;
      &.free{
        opacity: 0;
      }
    }
    .price-box{
      padding: 30rpx 0 0;
      color: #777;
      .price{
        font-size: 22px;
        font-weight: bold;
        color: #FF744E;
      }
      &.free{
        opacity: 0;
      }
    }
    .common-desc-list{
      position: relative;
      margin-top: 40rpx;
    }
    .desc-item{
      position: relative;
      display: flex;
      align-items: center;
      margin: 5px 0;
      font-size: 14px;
      .iconfont{
        margin-right: 10px;
        font-weight: bold;
        font-size: 14px;
      }
      .icon-duigou{
        color: #3060FC;
      }
    }
    .free .desc-item .iconfont{
      color: #cf0000;
    }
    .plus .desc-item .iconfont{
      color: #ed9353;
    }
    .pro .desc-item .iconfont{
      color: #3060FC;
    }
    .btn-box{
      position: relative;
      text-align: center;
      margin-top: 35px;
    }
    .buy-btn{
      text-align: center;
      border-radius: 20px;
      width: 140px;
      height: 39px;
      line-height: 39px;
      font-size: 14px;
      color: #777;
      border: 1px solid #d7d7d7;
      display: inline-block;
      &.gradient-primary-btn{
        color: #fff;
        cursor: pointer;
      }
    }
  }
  .discount-box{
    position: relative;
    height: 24px;
    line-height: 24px;
    font-size: 10px;
    padding: 0 5px;
    border-radius: 8px;
    color: #FF744E;
    .icon-Vector{
      position: absolute;
      font-size: 12px;
      top: -12px;
      left: -12px;
      opacity: 0;
    }
    .dots-point{
      position: absolute;
      top: 100%;
      margin-top: 10rpx;
      left: 50%;
      margin-left: -10rpx;
      width: 20rpx;
      height: 20rpx;
      border-radius: 20rpx;
      background: #D9D9D9;
      &.active{
        background: #0A4CE9;
      }
    }
  }
  .discount-btn{
    &.active{
      .discount-box{
        .icon-Vector{
          opacity: 1;
        }
      }
    }
  }
}